<template>
	<view class="mypet-center mt10" v-if="petList.length >0">

		<u-swipe-action class="pet-profile" v-for="(item,index) in petList" :key="item._id" :index="index" @click="delMyPet" @open="open" :options="options">
			<view class="pet-avatar-box row-start" @click="toEditPet(item)">
				<image class="pet-avatar" :src="item.avatar" mode="aspectFill"></image>
				<view class="row-between flex1">
					<view class="ml30 text-name">
						<view>
							<text class="lg black">{{item.name}}</text>
							<text class="xxs ml20 muted">{{item.age}}岁</text>
						</view>
						<view class="mt20 xs muted text-tag">
							<text>{{item.breed}}</text>
							<text>|</text>
							<text>{{item.gender == 0 ? '未知' : item.gender == 1 ? '男孩' : '女孩'}}</text>
							<text>|</text>
							<text>{{item.weight}}kg</text>
						</view>
					</view>
					<u-icon name="arrow-right" />
				</view>
			</view>
			<u-line></u-line>
		</u-swipe-action>
		<view class="bg-primary white save-btn row-center lg" @click="toAddPet">添加宠物</view>
	</view>
	<view v-else class="mypet-center mt10">
		<u-empty></u-empty>
		<view class="bg-primary white save-btn row-center lg" @click="toAddPet">添加宠物</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				petList: [],
				options: [{
					text: "删除",
					style: {
						backgroundColor: "#dd524d",
					},
				}, ],
			};
		},
		onShow() {
			this.getMyPet()
		},
		methods: {
			toEditPet(item) {
				uni.navigateTo({
					url: "/pages_subpackage/editPet/editPet?item=" + encodeURIComponent(JSON.stringify(item))
				});
			},
			toAddPet() {
				uni.navigateTo({
					url: "/pages_subpackage/addPet/addPet"
				})
			},
			async delMyPet(index, index1) {
				let delItem = this.petList[index]
				const {result: {code, msg, data}} = await wx.cloud.callFunction({name: 'pet', data: {$url: 'delMyPet', petId: delItem._id}})
				if (code == 200) {
					this.$toast({
						title: '删除成功'
					})
				}else {
					this.$toast({
						title: '删除失败'
					})
				}
				this.getMyPet()
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.petList[index].show = true;
				this.petList.map((val, idx) => {
					if (index != idx) this.petList[idx].show = false;
				});
			},
			async getMyPet() {
				uni.showLoading({
					title: "加载中..."
				})
				const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'pet', data: { $url: 'getMyPet' } })
				if (code == 200) {
					this.petList = data
					uni.hideLoading()
				} else {
					this.petList = []
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss">
	.mypet-center {
		.pet-profile {

			// border-top-left-radius: 28rpx;
			// border-top-right-radius: 28rpx;
			.pet-avatar-box {
				padding: 30rpx 20rpx;
				background-color: white;

				// border-top-left-radius: 28rpx;
				// border-top-right-radius: 28rpx;
				.pet-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.row-info {
				padding: 30rpx 20rpx;
				background-color: white;

				.label {
					width: 180rpx;
				}
			}

			.bdb-line {
				border-bottom: 1rpx solid #e5e5e5;
			}
		}

		.save-btn {
			margin-top: 40rpx;
			height: 88rpx;
			margin-left: 54rpx;
			margin-right: 54rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
		}
	}

	.text-name {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.text-tag {
		width: 270rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
	}
</style>